<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        background-color: #f0f0f0;
      }
      canvas {
        border: 1px solid #ccc;
      }
    </style>
  </head>
  <body>
    <canvas id="canvas" width="500" height="500"></canvas>
    <!-- 顶点着色器 -->
    <script id="vertex-shader" type="x-shader/x-vertex">
      attribute vec2 aPosition; // 位置坐标
      void main() {
        float radian = radians(45.0); // 旋转角度
        float sinb = sin(radian);
        float cosb = cos(radian);
        // 4维旋转矩阵
        mat4 rotate = mat4(
          cosb, -sinb, 0.0, 0.0,
          sinb, cosb, 0.0, 0.0,
          0.0, 0.0, 1.0, 0.0,
          0.0, 0.0, 0.0, 1.0  // 4维齐次坐标
        );
        gl_Position = rotate * vec4(aPosition, 0.0, 1.0); // 旋转后，新位置坐标
        gl_PointSize = 10.0; // 设置点的大小
      }
    </script>

    <!-- 片元着色器 -->
    <script id="fragment-shader" type="x-shader/x-fragment">
      void main() {
        gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); // 设置颜色
      }
    </script>
    <script type="module">
      /* 旋转公式推导
        已知：x1 = r * cos(α) y1 = r * sin(α)
          x2 = r * cos(α + β) = r * (cosαcosβ - sinαsinβ) = r*cosα*cosβ - r*sinα*sinβ = x1*cosβ - y1*sinβ
          y2 = r * sin(α + β) = r * (sinαcosβ + cosαsinβ) = r*sinα*cosβ + r*cosα*sinβ = y1*cosβ + x1*sinβ
        由此可得：
          x2 = x1 * cosβ - y1 * sinβ
          y2 = x1 * sinβ + y1 * cosβ
        也可以写成矩阵的形式：
          [x2]   [cosβ  -sinβ] [x1]
          [y2] = [sinβ   cosβ] [y1]
        其中，(x, y) 是原始坐标，(x', y') 是旋转后的坐标，θ 是旋转角度。
      */
      import initShaders from "../utils/initShader.js";

      const canvas = document.getElementById("canvas");
      const gl = canvas.getContext("webgl");
      if (!gl) {
        console.error("WebGL not supported");
      }

      const program = initShaders(gl);
      /*
        [
          -0.5, 0.5, // 第一个顶点坐标
          -0.5, -0.5, // 第二个顶点坐标
          0.5, -0.5, // 第三个顶点坐标
          0.5, 0.5, // 第四个顶点坐标
        ]
        注意：vertices 数据被包裹在了一个二维数组中，而 WebGL 期望的是一个一维的 Float32Array
      */
      const vertices = new Float32Array(
        // 位置坐标
        [
          -0.5,
          0.5, // 第一个顶点坐标
          -0.5,
          -0.5, // 第二个顶点坐标
          0.5,
          -0.5, // 第三个顶点坐标
          0.5,
          0.5, // 第四个顶点坐标
        ]
      );
      const buffer = gl.createBuffer();
      gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
      gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
      // 获取变量的索引
      const aPosition = gl.getAttribLocation(program, "aPosition");
      // 绑定顶点坐标数据
      gl.vertexAttribPointer(
        aPosition,
        2,
        gl.FLOAT,
        false,
        2 * Float32Array.BYTES_PER_ELEMENT,
        0
      );
      // 启用位置坐标
      gl.enableVertexAttribArray(aPosition);

      // 绘制四边形
      gl.drawArrays(gl.POINTS, 0, 4);
      gl.drawArrays(gl.LINE_LOOP, 0, 4); // 绘制线条
    </script>
  </body>
</html>
